<template>
    <div class="searchDelBox">
      <header>
        <van-nav-bar left-arrow @click-left="$router.back()">
        <template #right>
          <van-button type="primary" size="small" color="red" @click="onSearch">搜索</van-button>
        </template>
        <template #title>
          <van-search
            :autofocus="true"
            v-model="searchWord"
            placeholder="请输入商品名称"
          />
        </template>
        </van-nav-bar>
        <van-dropdown-menu>
          <van-dropdown-item  v-model="value" title="全部商品" :options="option" @change="onSort" />
          <van-dropdown-item title="筛选" ref="item" >
            <div>
              筛选
              <input type="text"  width="130" v-model="minPrice" placeholder="最小值"> —
              <input type="text"  width="130" v-model="maxPrice" placeholder="最大值">
            </div>
            <div style="padding: 5px 16px;" class="setting">
              <van-button type="danger" round @click="onConfirm">
                确认
              </van-button>
              <van-button type="danger" round @click="onReset">
                重置
              </van-button>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
      </header>
        <transition-group name="fade">
      <div class="content" key="12315">
        <div v-for="item in renderList" :key="item.id" @click="toDetail(item.proId)">
          <van-card
            :num="item.num"
            :price="item.price"
            :title="item.proName"
            :thumb="item.img"
          />
        </div>
      </div>
        </transition-group>
    </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, DropdownMenu, DropdownItem, Field, Card, Button, Search, Toast } from 'vant'
import { getSearch, searchBrand, addHistorySearch } from '@/api/request.js'

Vue.use(NavBar)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Field)
Vue.use(Card)
Vue.use(Button)
Vue.use(Search)
Vue.use(Toast)
// Vue.use(Lazyload, {
//   lazyComponent: true
// })
export default {
  props: ['s', 't'],
  data () {
    return {
      value: 0,
      searchWord: '',
      option: [
        { text: '默认排序', value: 0 },
        { text: '价格升序', value: 1 },
        { text: '价格降序', value: 2 }
      ],
      minPrice: '',
      maxPrice: '',
      searchList: [],
      renderList: []
    }
  },
  methods: {
    onSort () {
      switch (this.value) {
        case 0:
          this.renderList = [...this.searchList]
          break
        case 1:
          this.renderList = [...this.searchList]
          this.renderList.sort((a, b) => {
            return a.price - b.price
          })
          break
        case 2:
          this.renderList = [...this.searchList]
          this.renderList.sort((a, b) => {
            return b.price - a.price
          })
          break
      }
    },
    onConfirm () {
      this.$refs.item.toggle()
      const [min, max] = (this.minPrice - 0 > this.maxPrice - 0) ? [this.maxPrice, this.minPrice] : [this.minPrice, this.maxPrice]
      console.log(min, max)
      this.renderList = this.searchList.filter(val => {
        return val.price >= min && val.price <= max
      })
    },
    onReset () {
      this.$refs.item.toggle()
      this.renderList = [...this.searchList]
    },
    toDetail (id) {
      this.$router.push('/detail/' + id)
    },
    onSearch () {
      addHistorySearch({
        userId: sessionStorage.getItem('userId'),
        word: this.searchWord
      }).then(data => {
        // console.log(data.data)
      })
      this.$router.push('/searchRes/' + this.searchWord + '/s')
      getSearch({
        sKey: this.searchWord
      }).then(data => {
        this.searchWord = this.s
        if (data.data.msg.length > 0) {
          this.searchList = data.data.msg
          this.renderList = [...this.searchList]
        } else {
          Toast.fail('搜索不到想要的数据')
        }
      })
    }
  },
  mounted () {
    if (this.t === 'brand') {
      console.log(this.t)
      searchBrand({
        sKey: this.s
      }).then(data => {
        this.searchWord = this.s
        this.searchList = data.data.msg
        this.renderList = [...this.searchList]
      })
    } else {
      getSearch({
        sKey: this.s
      }).then(data => {
        this.searchWord = this.s
        if (data.data.msg.length > 0) {
          this.searchList = data.data.msg
          this.renderList = [...this.searchList]
        } else {
          Toast.fail('搜索不到想要的数据')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.searchDelBox{
  background: #efefef;
  overflow: hidden;
  height: 100%;
  header{
    ::v-deep .van-popup--top{
      display: flex;
      flex-direction: column;
      height: 1.5rem;
      justify-content: center;
      input{
        width: 1.3rem;
        height: 0.25rem;
        margin: 10px 0px;
        text-align: center;
        border: 2px solid #d99e9e;
        padding: 0 2px;
      }
      .setting{
        display: flex;
        justify-content: space-around;
        .van-button--normal{
          height: .3rem;
          padding: 0 .7rem;
        }
      }
    }
    ::v-deep .van-nav-bar__left{
      i{
        color: black;
      }
    }
    ::v-deep .van-nav-bar__title{
      max-width:70%;
      .van-search__content{
        height: .3rem;
      }
      i{
        color: black;
      }
    }
  }
  .content{
    overflow: auto;
    height: 100%;
    }
  .van-nav-bar__content{
    color: #000;
    .van-nav-bar__text{
        color: #000;
    }
    .van-icon{
        color: #000;
      }
    }
}
.van-card{
   display: flex;
  border-bottom: 1px solid #eee;
  color: #333;
  margin-bottom: 5px;
.van-card__price{
  color: #dd1a21;
}
}
.van-dropdown-item__content{
  padding: 0 10px;
}
  .van-search__content--round{
    border-radius: 0px;
  }
   .van-button--small{
    padding: 0 0.19rem;
  }
  .van-button--small {
    height: .3rem;
  }
.fade-move{
  transition: all 0.5s;
}
// 进入之前的状态
.fade-enter{
  transform: translateX(-100vw);
}
// 正在进入的状态
.fade-enter-active{
  transition: all 0.5s;
}
// 进入结束后的状态
.fade-enter-to{
  transform: translateX(0);
}
// 离开之前的状态
.fade-leave{
  transform: translateX(0);
}
// 正在离开的状态
.fade-leave-active{
  transition: all 0.5s;
}
// 离开结束后的状态
.fade-leave-to{
  transform: translateX(100vw);
}
</style>
